<template>
  <jy-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="检测项目" prop="itemName">
        <el-select v-model="form.refQualId" disabled placeholder="请选择检测项目" style="width: 100%;" clearable>
          <el-option v-for="bi in this.biList" :key="bi.qualId" :label="bi.qualName + '(' + bi.qualUnit + ')'" :value="bi.qualId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="符号" prop="symbolValue">
        <el-select v-model="form.symbolValue" placeholder="请选择符号" style="width: 100%;" clearable>
          <el-option v-for="dict in dict.type.symbol" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="技术指标" prop="num1" v-if="isShow">
        <el-input v-model="form.num1" placeholder="请输入技术指标" clearable />
      </el-form-item>
      <el-form-item label="技术指标" prop="num1" v-if="!isShow">
        <el-row>
          <el-col :span="11">
            <el-input v-model="form.num1" placeholder="请输入技术指标" clearable />
          </el-col>
          <el-col :span="2">
            <div style="text-align: center;">~</div>
          </el-col>
          <el-col :span="11">
            <el-input v-model="form.num2" placeholder="请输入技术指标" clearable />
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
      <el-button size="small" type="primary" @click="clearInfo">清空数据</el-button>
      <el-button size="small" @click="cancel">取 消</el-button>
    </div>
  </jy-dialog>
</template>
<script>
import { getDetail } from "@/api/sycs/bsJudgeBase";
import { listBiQualification } from "@/api/sycs/biQualification";
export default {
  name: "BsJudgeBaseEditView",
  dicts: ["symbol"],
  props: {
    syType: {
      type: [String, Number],
      default: ""
    }
  },

  data() {
    return {
      title: "技术指标",
      loading: false,
      buttonLoading: false,
      open: false,
      isShow: true,
      biList: [],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        // refQualId: [{ required: true, message: "检测项目不能为空", trigger: "change" }],
        // symbolValue: [{ required: true, message: "符号不能为空", trigger: "change" }],
        // num1: [{ required: true, message: "技术指标不能为空", trigger: "blur" }],
        // num2: [{ required: true, message: "技术指标不能为空", trigger: "blur" }]
      },
      symbolArr: ["07", "08", "09", "10"]
    };
  },
  watch: {
    syType: {
      deep: true,
      immediate: true,
      handler(newVal, oldVal) {
        this.getBiList();
      }
    },
    "form.symbolValue": {
      handler(newVal, oldVal) {
        this.isShow = !this.symbolArr.includes(newVal);
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
    init(info) {
      this.reset();
      this.open = true;
      this.form = info;
    },
    // 检测项目下拉
    getBiList() {
      if (!this.syType) {
        return;
      }
      const params = {
        syType: this.syType
      };
      listBiQualification(params).then((response) => {
        this.biList = response.rows;
      });
    },
    clearInfo() {
      this.form.symbolValue = "";
      this.form.jiszb = "-";
      this.form.num1 = null;
      this.form.num2 = null;
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          // 去除多余指标值
          if (!this.symbolArr.includes(this.form.symbolValue) && this.form.num2) {
            this.form.num2 = "";
          }
          this.buttonLoading = true;
          const info = {
            ...this.form,
            qualId: this.form.refQualId
          };
          this.$emit("submit", info);
          this.buttonLoading = false;
          this.cancel();
        }
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        // refQualId: undefined,
        itemName: undefined,
        symbolValue: undefined,
        num1: undefined,
        num2: undefined,
        remark: undefined
      };
      this.resetForm("form");
    }
  }
};
</script>
<style lang="scss" scoped></style>
